<script setup>
import { myPost } from "@/hook/universality"
import { computed } from "vue"
import NoteModel from "./TimeLineComps/NoteModel.vue"
import ScreenComp from "./TimeLineComps/ScreenComp.vue"
import { useNote } from "@/stores/note"
import { useRoute } from 'vue-router'

const Note = useNote(), Route = useRoute()
const rawNotes = ref([]) // 原数据
const setting = reactive({ view: "xx", page: 30 })

myPost("/note/notes_share", { ids: Route.query.share },
  data => rawNotes.value = Note.handleNotes(data))

// 翻页
const load = () => {
  console.log(123)
  setting.page += 20
  if (setting.page > Note.notes.length) myMsg("没有更多了")
}
// 是否加载完
const noMore = computed(() => setting.page > rawNotes.value.length)


// 对note数量限制 + 筛选
const notes = computed(() => {
  if (setting.view == 'sx')
    return rawNotes.value.filter(note => (screen.screenFunc ? screen.screenFunc(note, screen) : true))
  return rawNotes.value.slice(0, setting.page)
})

// 划分note列表的视图
const notesView = computed(() => {
  console.log(notes.value.slice(0, setting.page).length)
  if (setting.view == 'sx') return Note.getView(notes.value.slice(0, setting.page))['xx']
  return Note.getView(notes.value)[setting.view]
});


// 筛选功能=======================================
const screen = reactive({})
</script>

<template>
  <el-row style="margin-bottom:5px">
    <!-- 视图选择和编辑模式 -->
    <el-radio-group v-model="setting.view" size="small">
      <el-radio-button label="xx">详细</el-radio-button>
      <el-radio-button label="mt">每天</el-radio-button>
      <el-radio-button label="mz">每周</el-radio-button>
      <el-radio-button label="my">每月</el-radio-button>
      <el-radio-button label="mn">每年</el-radio-button>
      <el-radio-button label="sx">筛选</el-radio-button>
    </el-radio-group>
  </el-row>

  <ScreenComp v-if="setting.view == 'sx'" :screen="screen" style="margin-bottom: 5px;" />

  <!-- 时间线开始 -->
  <el-timeline v-infinite-scroll="load" :infinite-scroll-disabled="noMore">
    <el-timeline-item v-for="(mtNote, key) of notesView" :key="key" :timestamp="key" placement="top">
      <NoteModel v-for="note in mtNote" :note="note" :key="note.noteId" readonly style="margin-bottom: 5px" />
    </el-timeline-item>
    <el-timeline-item timestamp="Origin" placement="top"></el-timeline-item>
  </el-timeline>
</template>

<style scoped lang="less">
// 时间线时间文本
::v-deep(.el-timeline-item__timestamp) {
  color: var(--mini-text-color);
  margin-bottom: 5px;
}

// 时间线节点
::v-deep(.el-timeline-item) {
  padding-bottom: 10px;
}
</style>